<template>
  <div class="allocMenu">
   <el-card>
    <el-tree
      :data="roleMenuList"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      :default-checked-keys="checkedArr">
    </el-tree>
    <div class="btn" style="margin-bottom:15px; float:right">
      <el-button size="small" @click="resetChecked">清空</el-button>
      <el-button size="small" type="primary" @click="onSave">保存</el-button>
    </div>
   </el-card>
  </div>
</template>

<script>
import { getRoleMenus, allocateRoleMenus } from '@/services/menu'
export default {
  name: 'allocMenu',
  props: {
    id: {
      type: [Number, String],
      require: true
    }
  },
  created () {
    this.getRoleMenus()
  },
  data () {
    return {
      roleMenuList: [],
      // 存储子节点的相关信息
      defaultProps: {
        // 子节点所在的某个属性值
        children: 'subMenuList',
        // 父节点与子节点所要展示出来的标题名一致时的写法
        label: 'name'
      },
      // 默认勾选的节点的 key 数组(存储选择的数据 id)
      checkedArr: []
    }
  },
  methods: {
    async getRoleMenus () {
      const { data } = await getRoleMenus({ roleId: this.id })
      if (data.code === '000000') {
        this.roleMenuList = data.data
        // 获取选中的数据
        this.getCheckedKeys(data.data)
      }
    },
    // 筛选数组,将被选中的id添加到checkedArr数组里
    // 在本次项目中有以下几点需要考虑的
    getCheckedKeys (menu) {
      menu.forEach(item => {
        // 1.当前selected为false的全部退出
        if (!item.selected) {
          return
        }
        // 2.当selected为true时,还要判断当前节点的subMenuList属性是否存在
        // 如果一个节点中,subMenuList不为null,那么他就不能被选中,以防他选中了,他的子节点就会被全部选中
        if (item.subMenuList) {
          return this.getCheckedKeys(item.subMenuList)
        }
        if (item.selected) {
          // 通过push方法,数据无法得到渲染,因为数据频繁进行切换,导致无法获取正常数据
          // this.checkedArr.push(item.id)
          // 通过赋值的方式更新数据
          this.checkedArr = [...this.checkedArr, item.id]
        }
      })
    },
    // 保存
    async onSave () {
      // 获取所有被选中的节点id值(通过node-key属性来快速确定选中对象的某个属性值)
      // console.log(this.$refs.tree.getCheckedKeys())
      const { data } = await allocateRoleMenus({
        roleId: this.id,
        menuIdList: this.$refs.tree.getCheckedKeys()
      })
      if (data.code === '000000') {
        this.$message.success('保存成功')
        this.$router.push({ name: 'role' })
      }
    },
    // 清空
    resetChecked () {
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
